<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" import="java.util.List,com.van.pojo.Product,com.van.pojo.Tag"%>
<%List products = (List)request.getAttribute("products");
List tags = (List)request.getSession().getAttribute("tags");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>轻课商城</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">轻课商城</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">首页</a></li>
              <li><a href="#">热销商品</a></li>
              <li><a href="#">热门活动</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="signin.jsp">注册</a></li>
              <li><a href="login.jsp">登录</a></li>
              <li class="active"><a href="./">个人中心 <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">购物车</a></li>
              <li><a href="../navbar-fixed-top/">退出</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron" id="cart">
        <h2>热门商品</h2>
        <p>全场9块9包邮哦，走过路过千万不要错过</p>
      </div>
      <div class="row">
      <div class="col-sm-6 col-md-4">
      	<form class="form-inline" action="searchProduct" method="get">
			  <div class="form-group">
			    <input type="text" name="searchKey" class="form-control" id="searchKey" placeholder="搜搜看">
			  </div>
			  <label class="control-label">分类:</label>
		      	<select class="form-control input-sm" name="tag_id">
					    <% for(Object tg : tags) {
					    	Tag tag = (Tag)tg;
					    %>
					      <option value=<%=tag.getId()%>><%=tag.getName()%></option>
					    <% }%>
				</select>
			  <button type="submit" class="btn btn-default">搜一下</button><br/>
			  <a href="addProduct.jsp" class="btn btn-primary btn-lg active" role="button">增加商品</a>
		 </form>
		 </div>
      </div>
      <hr>
	  <div class="row">
	  	<%if (products.size() == 0){%>
	  		<p style="text-align:center">抱歉你搜索的商品太奇葩，跑路了</p>
	  	<%}%>
	     <%for(Object ob : products) {
	     	Product product = (Product)ob;
	     %>
		  <div class="col-sm-6 col-md-4">
		    <div class="thumbnail">
		    <img src="https://img.alicdn.com/bao/uploaded/i3/TB1rBh6OVXXXXXuaFXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg" alt="<%=product.getTitle()%>">
		      <div class="caption">
		        <h3><%= product.getTitle()%></h3>
		        <p>价格:<%=product.getPrice()%>$&nbsp;&nbsp;&nbsp;&nbsp;库存:<%=product.getTotalNumber()%></p>
		        <p><a href="#" class="btn btn-primary" role="button">更改商品</a> <a href="#" class="btn btn-default addCart" role="button" >添加购物车</a></p>
		      </div>
		    </div>
		  </div>
		  <%}%>
	  </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script type="text/javascript">
		$(".addCart").click(function(){
			var parent = $(this).parents(".thumbnail");
			alert("已添加进购物车");
			$("#cart").append(parent);
		});
			
		
	</script>
  </body>
</html>